<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- AdThrive Head Tag Manual -->
    <script data-no-optimize="1" data-cfasync="false">
      (function (w, d) {
        w.adthrive = w.adthrive || {};
        w.adthrive.cmd = w.adthrive.cmd || [];
        w.adthrive.plugin = "adthrive-ads-manual";
        w.adthrive.host = "ads.adthrive.com";
        var s = d.createElement("script");
        s.async = true;
        s.referrerpolicy = "no-referrer-when-downgrade";
        s.src =
          "https://" +
          w.adthrive.host +
          "/sites/643436a4e6d20859e40a446b/ads.min.js?referrer=" +
          w.encodeURIComponent(w.location.href) +
          "&cb=" +
          (Math.floor(Math.random() * 100) + 1);
        var n = d.getElementsByTagName("script")[0];
        n.parentNode.insertBefore(s, n);
      })(window, document);
    </script>
    <!-- End of AdThrive Head Tag -->

    <!-- Global site tag (gtag.js) - Google Analytics -->

    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=UA-79254642-6"
    ></script>

    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "UA-79254642-6");
    </script>

    <meta charset="utf-8" />
    <title>Background map &#124; the D3 Graph Gallery</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta
      name="description"
      content="How to build the background of a map with Javascript and D3.js: from the most basic example to highly customized examples."
    />
    <meta
      name="keywords"
      content="Data,Dataviz,Datavisualization,Javascript,D3,D3.js,area chart"
    />
    <meta name="author" content="Yan Holtz" />
    <link rel="icon" href="img/logo/D3_single_small.png" />

    <meta
      property="og:title"
      content="Area Chart &#124; the D3 Graph Gallery"
    />
    <meta property="og:image" content="img/overview_RGG.png" />
    <meta
      property="og:description"
      content="How to build the background of a map with Javascript and D3.js: from the most basic example to highly customized examples."
    />

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Custom fonts for this template -->
    <link
      href="vendor/font-awesome/css/font-awesome.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Kaushan+Script"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700"
      rel="stylesheet"
      type="text/css"
    />

    <!-- Custom styles for this template -->
    <link href="css/agency.css" rel="stylesheet" />

    <!-- JQUERY -->
    <script src="vendor/jquery/jquery.min.js"></script>
  </head>

  <body id="page-top">
    <!-- THIS ALLOWS TO INSERT THE MENU THAT IS STORED IN A MENU.HTML FILE-->
    <nav class="navbar navbar-expand-lg fixed-top" id="mainNav"></nav>
    <script>
      $(function () {
        $("#mainNav").load("html_chunk/menu.html");
      });
    </script>

    <!-- THIS ALLOWS TO INSERT THE MODAL OF THE MENU THAT IS STORED IN A MENU_MODAL.HTML FILE-->
    <div id="modal_menu_insertion"></div>
    <script>
      $(function () {
        $("#modal_menu_insertion").load("html_chunk/menu_modal.html");
      });
    </script>

    <!-- Header -->
    <header class="masthead" style="padding-top: 150px; padding-bottom: 80px">
      <div class="textlanding">
        <h1>Background map</h1>
        <hr class="short_hr" />
        <br />
        <ul class="list-inline social-buttons">
          <li class="list-inline-item">
            <a href="https://twitter.com/R_Graph_Gallery">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li class="list-inline-item social-buttons">
            <a href="https://github.com/holtzy">
              <i class="fa fa-github" style="color: white"></i>
            </a>
          </li>
          <li class="list-inline-item social-buttons">
            <a href="https://www.linkedin.com/in/yan-holtz-2477534a/">
              <i class="fa fa-linkedin"></i>
            </a>
          </li>
          <li class="list-inline-item social-buttons">
            <a href="https://www.yan-holtz.com">
              <i class="fa fa-home"></i>
            </a>
          </li>
        </ul>
        <br /><br />
        <p style="max-width: 700px; margin: auto">
          This is the
          <a href="https://www.data-to-viz.com/graph/map.html"
            >background map</a
          >
          section of the gallery. If you want to know more about this kind of
          chart, visit
          <a href="https://www.data-to-viz.com/graph/map.html"
            >data-to-viz.com</a
          >. If you're looking for a simple way to implement it in d3.js, pick
          an example below.
        </p>
      </div>
    </header>

    <!-- THIS ALLOWS TO INSERT THE ADVERTISEMENT BANNER THAT IS STORED IN A BANNER.HTML FILE-->
    <div id="position_for_images"></div>
    <script>
      $(function () {
        $("#position_for_images").load("html_chunk/images.html");
      });
    </script>

    <!-- ======================== PORTFOLIO SECTION ============================ --><!-- Images must be 480 x 480, resize them with ./script_reformat_img.sh output_name.png -->
    <section class="bg" id="portfolio" style="padding-top: 10px">
      <div class="container">
        <div class="mySeryTitle">About input data</div>
        <hr />
        <p>
          Difference between <code>geoJson</code> and <code>topoJson</code>. But
          not necessary thanks to leaflet.
        </p>

        <br /><br /><br /><br />
        <div class="mySeryTitle">From a <code>geoJson</code> file</div>
        <hr />
        <p>
          Input data for maps is <code>geoJson</code> format. D3.js works very
          well to display this kind of information using <code>path</code>.
        </p>
        <div id="portfolio-items" class="row">
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" href="graph/backgroundmap_basic.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>Most basic</p>
                  <hr />
                  <p class="explanation_portfolio">
                    The most basic background map you can do in d3.js. Keeping
                    only the core code.<br /><br />Input data format: geoJson
                  </p>
                </div>
              </div>
              <img
                class="img-fluid"
                src="img/graph/backgroundmap_basic.png"
                alt=""
              />
            </a>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a
              class="portfolio-link"
              href="graph/backgroundmap_changeprojection.html"
            >
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>Change projection</p>
                  <hr />
                  <p class="explanation_portfolio">
                    Shows how to switch from one projection to another thanks to
                    the geo-projection plugin.
                  </p>
                </div>
              </div>
              <img
                class="img-fluid"
                src="img/graph/backgroundmap_changeprojection.png"
                alt=""
              />
            </a>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" href="graph/backgroundmap_country.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>Single country</p>
                  <hr />
                  <p class="explanation_portfolio">
                    How to plot the boundaries of any country in d3.js.<br /><br />Actually
                    explains how to filter a geoJson file.
                  </p>
                </div>
              </div>
              <img
                class="img-fluid"
                src="img/graph/backgroundmap_country.png"
                alt=""
              />
            </a>
          </div>
        </div>

        <br /><br /><br /><br />
        <div class="mySeryTitle">
          Using the <code>Leaflet.js</code> open source library
        </div>
        <hr />
        <p>
          <a href="https://leafletjs.com/examples.html">Leaflet</a> is an
          open-source JavaScript library for mobile-friendly interactive maps.
          Awesome for background maps. See the range of background tiles you can
          use
          <a href="https://leaflet-extras.github.io/leaflet-providers/preview/"
            >here</a
          >
          and <a href="https://wiki.openstreetmap.org/wiki/Tiles">here</a>.
        </p>
        <div id="portfolio-items" class="row">
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" href="graph/backgroundmap_leaflet.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>Most basic leaflet</p>
                  <hr />
                  <p class="explanation_portfolio">
                    A very basic example showing how to build a leaflet map.
                  </p>
                </div>
              </div>
              <img
                class="img-fluid"
                src="img/graph/backgroundmap_leaflet.png"
                alt=""
              />
            </a>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a
              class="portfolio-link"
              href="graph/backgroundmap_leaflet_buttonLayer.html"
            >
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>Button to control tile</p>
                  <hr />
                  <p class="explanation_portfolio">
                    Add a button that allows to select different background
                    tiles.
                  </p>
                </div>
              </div>
              <img
                class="img-fluid"
                src="img/graph/backgroundmap_leaflet_buttonLayer.gif"
                alt=""
              />
            </a>
          </div>
        </div>

        <br /><br /><br /><br />
        <div class="mySeryTitle">Using <code>Canvas</code></div>
        <hr />
        <p>
          Canvas is an alternative to SVG. Its main advantage is that it avoids
          to overload the dom and thus often leads to better browser
          performance. Here are examples showing how to build background maps
          using d3.js and canvas:
        </p>
        <div id="portfolio-items" class="row">
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a
              class="portfolio-link"
              href="graph/backgroundmap_canvas_basic.html"
            >
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>Most basic map with canvas</p>
                  <hr />
                  <p class="explanation_portfolio">
                    A very basic example showing how to build a map using d3.js
                    and canvas.
                  </p>
                </div>
              </div>
              <img
                class="img-fluid"
                src="img/graph/backgroundmap_canvas_basic.png"
                alt=""
              />
            </a>
          </div>
        </div>

        <br /><br /><br /><br />
        <div class="mySeryTitle">Selection of blocks</div>
        <hr />
        <p>
          A few blocks with more complicated codes to showcase the possibility
          of the <code>d3-sankey </code>plugin
        </p>
        <div id="portfolio-items" class="row">
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a
              class="portfolio-link"
              href="https://medium.com/@mbostock/command-line-cartography-part-1-897aa8f8ca2c"
            >
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>Mike's tutorial</p>
                  <hr />
                  <p class="explanation_portfolio">
                    A tutorial built by Mike Bostock: a very good starting point
                    to maps in d3.js.
                  </p>
                </div>
              </div>
              <img
                class="img-fluid showBlock"
                src="img/block/block_backgroundmapMike.png"
                alt="Mike's map tutorial"
              />
            </a>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a
              class="portfolio-link"
              href="https://bl.ocks.org/alexmacy/6700d44240d2b6d3ec9767a5a5854e42"
            >
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>Demo of all projections</p>
                  <hr />
                  <p class="explanation_portfolio">
                    A block showcasing all the different available projection,
                    with smooth transitions.
                  </p>
                </div>
              </div>
              <img
                class="img-fluid showBlock"
                src="img/graph/block_projection_demo.gif"
                alt="All d3 map projection"
              />
            </a>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" href="https://leafletjs.com">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>Leaflet documentation</p>
                  <hr />
                  <p class="explanation_portfolio">
                    Link to the leaflet website: awesome doc for awesome maps.
                  </p>
                </div>
              </div>
              <img
                class="img-fluid showBlock"
                src="img/block/block_backgroundmapLeaflet.png"
                alt="circular barchart"
              />
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- ======================================================================= -->

    <!-- ============================ RELATED SECTION ============================ -->
    <section
      class="bg-light"
      id="portfolio_landing"
      style="padding-top: 30px; padding-bottom: 30px"
    >
      <div class="container">
        <p class="mySeryTitle">Related chart types</p>
        <hr />
        <div class="row">
          <div class="col-md-2 col-sm-4 portfolio-item">
            <a class="portfolio-link" href="backgroundmap.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Map150.png" alt="" />
            </a>
            <div class="captionPortfolio">Map</div>
          </div>
          <div class="col-md-2 col-sm-4 portfolio-item">
            <a class="portfolio-link" href="choropleth.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img
                class="img-fluid"
                src="img/section/Choropleth150.png"
                alt=""
              />
            </a>
            <div class="captionPortfolio">Choropleth</div>
          </div>
          <div class="col-md-2 col-sm-4 portfolio-item">
            <a class="portfolio-link" href="hexbinmap.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img
                class="img-fluid"
                src="img/section/MapHexbin150.png"
                alt=""
              />
            </a>
            <div class="captionPortfolio">Hexbin map</div>
          </div>
          <div class="col-md-2 col-sm-4 portfolio-item">
            <a class="portfolio-link" href="cartogram.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img
                class="img-fluid"
                src="img/section/Cartogram150.png"
                alt=""
              />
            </a>
            <div class="captionPortfolio">Cartogram</div>
          </div>
          <div class="col-md-2 col-sm-4 portfolio-item">
            <a class="portfolio-link" href="connectionmap.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img
                class="img-fluid"
                src="img/section/ConnectedMap150.png"
                alt=""
              />
            </a>
            <div class="captionPortfolio">Connection</div>
          </div>
          <div class="col-md-2 col-sm-4 portfolio-item">
            <a class="portfolio-link" href="bubblemap.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img
                class="img-fluid"
                src="img/section/BubbleMap150.png"
                alt=""
              />
            </a>
            <div class="captionPortfolio">Bubble map</div>
          </div>
        </div>
      </div>
    </section>

    <!-- ============================ CONTACT SECTION ============================ -->

    <!-- ANCHOR -->
    <a name="contactanchor"></a>

    <section id="contact" class="bg" style="background-color: white"></section>

    <!-- THIS ALLOWS TO INSERT THE CONTACT CHUNK THAT IS STORED IN A CONTACT.HTML FILE-->
    <script>
      $(function () {
        $("#contact").load("html_chunk/contact.html");
      });
    </script>

    <!-- ============================ FOOTER SECTION ============================ -->
    <footer class="bg-light" id="myFooter"></footer>

    <!-- Start Added by AdThrive -->
    <script
      type="text/javascript"
      async
      src="https://btloader.com/tag?o=5698917485248512&upapi=true&domain=d3-graph-gallery.com"
    ></script>
    <script>
      !(function () {
        "use strict";
        var e;
        (e = document),
          (function () {
            var t, n;
            function r() {
              var t = e.createElement("script");
              (t.src =
                "https://cafemedia-com.videoplayerhub.com/galleryplayer.js"),
                e.head.appendChild(t);
            }
            function a() {
              var t = e.cookie.match("(^|[^;]+)\s*__adblocker\s*=\s*([^;]+)");
              return t && t.pop();
            }
            function c() {
              clearInterval(n);
            }
            return {
              init: function () {
                var e;
                "true" === (t = a())
                  ? r()
                  : ((e = 0),
                    (n = setInterval(function () {
                      (100 !== e && "false" !== t) || c(),
                        "true" === t && (r(), c()),
                        (t = a()),
                        e++;
                    }, 50)));
              },
            };
          })().init();
      })();
    </script>
    <!-- End Added by AdThrive -->

    <!-- THIS ALLOWS TO INSERT THE FOOTER THAT IS STORED IN A FOOTER.HTML FILE-->
    <script>
      $(function () {
        $("#myFooter").load("html_chunk/footer.html");
      });
    </script>

    <!-- ============================ -->

    <!-- =============== JAVASCRIPT SECTION =============== -->

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/agency.min.js"></script>

    <!--============================== -->
  </body>
</html>
